<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      :btnList="fullInfo.btnList"
    >
      <div style="height: 50px">
        <span>出库单：</span>
        <el-select
          v-model="orderNo"
          @change="selectExportOrder"
          placeholder="请选择出库单"
        >
          <el-option
            v-for="(item, index) in exportList"
            :key="index"
            :label="item.orderNo"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <basic-information :info="infoList">
            <template v-slot:basic-useCreateUserName>
              <span>{{ infoList.data.useApplication.createUserName }}</span>
            </template>
          </basic-information>
        </div>
      </div>

      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('detailInfo') }}</p>
        </div>
        <div class="model-panel-body">
          <div class="flex_full_item">
            <!-- 表格 -->
            <page-table
              :refresh="tableInfo.refresh"
              :init-curpage="tableInfo.initCurpage"
              v-model:data="tableInfo.data"
              :pager="false"
              :api="tableInfo.api"
              :query="filterInfo.query"
              :field-list="tableInfo.fieldList"
              :handle="tableInfo.handle"
              :checkBox="false"
              @handleEvent="handleEvent"
            ></page-table>
          </div>
        </div>
      </div>
    </NewFullScreen>
  </div>
</template>

<script setup name="useReturnApplicationStorage">
import PageTable from '../../../components/PageTable/index'
import {
  getUseExport,
  getUseExportDetailAll,
  getUseExportAll,
  createUseStorage,
} from '@/api/use.js'
import BasicInformation from '@/components/BasicInformation/index'
const { proxy } = getCurrentInstance()
const emit = defineEmits()

const props = defineProps(['visible', 'title', 'id'])

const infoList = reactive({
  data: {
    useApplication: {},
  },
  fieldList: [
    { label: '领用人', value: 'useCreateUserName', type: 'slot' },
    { label: '领用部门', value: 'deptName', type: 'text' },
    { label: '领入仓库', value: 'storageDepotName', type: 'text' },
    { label: '领出仓库', value: 'exportDepotName', type: 'text' },
    { label: '出库时间', value: 'createTime', type: 'text' },
    { label: '出库人', value: 'createUserName', type: 'text' },
    {
      label: '备注',
      value: 'remark',
      type: 'textarea',
    },
  ],
})
// 过滤相关配置
const filterInfo = reactive({
  query: {
    // useApplicationId: '',
    useExportId: '',
  },
})
// 表格相关
const tableInfo = reactive({
  refresh: 1,
  data: [],
  api: getUseExportDetailAll,
  fieldList: [
    { label: '产品名称', value: 'commonName' },
    { label: '产品编码', value: 'productCode' },
    { label: '生产厂家', value: 'brand' },
    { label: '规格', value: 'standard' },
    { label: '单位', value: 'unit' },
    { label: '生产批号', value: 'batchNumber' },
    { label: '生产日期', value: 'productionDate' },
    { label: '失效日期', value: 'validityDate' },
    { label: '数量', value: 'exportQty' },
  ],
})
const fullInfo = reactive({
  btnList: [{ label: '提交', event: _export, show: true }],
})
//选择库存产品
const depotStorageInfo = reactive({
  visible: false,
  query: {},
})
const exportList = ref([])
const orderNo = ref('')

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

watch(
  () => props.visible,
  (value) => {
    showDialog.value = value
  },
  { immediate: true }
)

onMounted(() => {
  init()
})

// 触发事件
function handleEvent() {}
function _export() {
  let type = 'create'
  let api = createUseStorage
  let data = {
    useExport: infoList.data,
    useExportDetails: tableInfo.data,
  }
  proxy.$handleAPI(type, api, data).then((res) => {
    if (res.success) {
      showDialog.value = false
    }
  })
}
function init() {
  let params = {
    useApplicationId: props.id,
  }
  getUseExportAll(params).then((res) => {
    if (res.success && res.data.length) {
      exportList.value = res.data
      filterInfo.query.useExportId = res.data[0].id
      orderNo.value = res.data[0].orderNo
      getSelectInfo()
    }
  })
}
function getSelectInfo() {
  getUseExport(filterInfo.query.useExportId).then((res) => {
    if (res.success) {
      infoList.data = res.data
    }
  })
  tableInfo.refresh = Math.random()
}
function selectExportOrder(item) {
  filterInfo.query.useExportId = item
  getSelectInfo()
}
</script>

<style scoped></style>
